<!DOCTYPE html>
<html>

<head>
    <!--防乱编码-->
    <meta charset="UTF-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1"/>
    <!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <!--禁止浏览器自动的识别-电话号码-email--->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!--是否启用Web全屏-->
    <meta name="apple-mobile-web-app-capable" content='yes'/>
    <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
    <!--设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content='black'/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/password.css"/>
    <link rel="stylesheet" type="text/css" href="../font-awesome/css/font-awesome.css"/>
</head>

<body>
<ul class="password">
    <li>
        <a href="../index.html"><span class="fa fa-angle-left"></span></a>
        <p>忘记密码</p>
        <span></span>
    </li>
    <li>
        请输入您绑定的手机号码
    </li>
    <li>
        <p><img src="../img/phonecolour.png"/></p>
        <input type="text" name="" id="tel" value="" placeholder="手机号码"/>
        <p><img src="../img/x.png"/></p>
        <!--<p id="count">30</p>-->
    </li>
    <li>
        <div id="content">
            <a class="add" id="next">下一步</a>
        </div>
    </li>
</ul>
<div id="con">
    <div id="box">
        <h3>确认手机号码</h3>
        <p style="margin-top: 8px;">我们将发送验证码到:</p>
        <p></p>
        <button id="cancel"><a href="../html/Forgot_password.html"></a>取消</button>
        <button><a href="../html/Received.html" id="btn">确认</a></button>
    </div>
</div>
</body>
<script src="../js/jquery-1.7.2.js"></script>
<script src="../js/rem1.js"></script>
<script type="text/javascript">
    $(function () {

        //			$('#content').click(function() {
        //				$('#con').fadeToggle(); //点击添加按钮让遮罩显示
        //			})
        $('#cancel').click(function () {
            $('#con').fadeToggle();

        })
        //手机验证
        $("#next").click(() => {
            let reg = /^1(3|4|5|7|8)\d{9}$/;
            if (reg.test($("#tel").val()) == true) {
                console.log($("#tel").val());
                $('#con').fadeToggle();
                $("#box p").eq(1).html($("#tel").val())
            } else {
                alert("手机格式错误")
            }
        })
        $("#btn").click(function () {
            $.ajax({
                type: "post",
                url: "http://127.0.0.1:1000",
                data: {
                    name: "大道云航",
                    tel: $("#tel").val()
                },
                success(data) {
//						console.log( typeof data)
                    sessionStorage.setItem("code", data)

                },
                error(err) {
                    console.log("err:" + err)
                }
            })

        })

    })
</script>

</html>